<!-- 课表的页面 -->
<template>
  <div class="cq_bottom_table">
    <div class="h_title sbFlex">
      <div class="h_title_l">上课时间类型</div>
      <div class="h_title_r">
        <el-button type="primary" @click="addSection('')">节次设置</el-button>
      </div>
    </div>
    <tableBox
      :tableArr="tableArr"
      :tableData="tableData"
      :total="total"
      :pageIndex="1"
      :pagination="false"
      @edit="addSection"
    ></tableBox>
    <el-dialog
      :title="sectionEditNext == 0 ? '节次设置' : '调整结果'"
      center
      :visible.sync="sectionEditShow"
      width="765px"
    >
      <div class="sectionSet" v-if="sectionEditNext == 0">
        <div class="sectionSet_form_1">
          <el-row :gutter="20">
            <el-col :span="16"
              ><div class="flex">
                <div style="min-width: 65px; height: 100%">类型名称</div>
                <el-input
                  placeholder="请输入名称"
                  v-model="sectionSetConfig.name"
                ></el-input></div
            ></el-col>
            <el-col :span="8"
              ><div class="flex">
                <div style="min-width: 35px; height: 100%">简称</div>
                <el-input
                  placeholder="请输入简称"
                  v-model="sectionSetConfig.shortName"
                ></el-input></div
            ></el-col>
          </el-row>
        </div>
        <div class="sectionSet_form_2">
          <el-row :gutter="20">
            <el-col :span="3"><div class="flex">设置节数</div></el-col>
            <el-col :span="3"
              ><div style="text-align: right; width: 100%">上午</div></el-col
            >
            <el-col :span="7"
              ><div class="flex">
                <el-input
                  style="width: 103px"
                  placeholder="请输入节数"
                  v-model="sectionSetConfig.amNum"
                ></el-input></div
            ></el-col>
            <el-col :span="3"
              ><div style="text-align: right; width: 100%">下午</div></el-col
            >
            <el-col :span="7"
              ><div class="flex">
                <el-input
                  style="width: 103px"
                  placeholder="请输入节数"
                  v-model="sectionSetConfig.pmNum"
                ></el-input></div
            ></el-col>
          </el-row>
        </div>
        <div class="sectionSet_form_2">
          <el-row :gutter="20">
            <el-col :span="3"><div class="flex">上课时间</div></el-col>
            <el-col :span="3"
              ><div style="text-align: right; width: 100%">
                课时长度
              </div></el-col
            >
            <el-col :span="7"
              ><div class="flex">
                <el-input
                  style="width: 103px"
                  placeholder="请输入课时长度"
                  v-model="sectionSetConfig.duration"
                ></el-input>
                <div style="min-width: 35px; height: 100%; margin-left: 5px">
                  分钟
                </div>
              </div></el-col
            >
            <el-col :span="3"
              ><div style="text-align: right; width: 100%">
                课间休息
              </div></el-col
            >
            <el-col :span="7"
              ><div class="flex">
                <el-input
                  style="width: 103px"
                  placeholder="请输入课间休息"
                  v-model="sectionSetConfig.rest"
                ></el-input>
                <div style="min-width: 35px; height: 100%; margin-left: 5px">
                  分钟
                </div>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="sectionSet_form_2">
          <el-row :gutter="20">
            <el-col :span="3"><div class="flex">首课时间</div></el-col>
            <el-col :span="3"
              ><div style="text-align: right; width: 100%">上午</div></el-col
            >
            <el-col :span="7"
              ><div class="flex">
                <el-time-picker
                  format="HH:mm"
                  style="width: 103px"
                  v-model="sectionSetConfig.amTime"
                  placeholder="时间"
                >
                </el-time-picker></div
            ></el-col>
            <el-col :span="3"
              ><div style="text-align: right; width: 100%">下午</div></el-col
            >
            <el-col :span="7"
              ><div class="flex">
                <el-time-picker
                  format="HH:mm"
                  style="width: 103px"
                  v-model="sectionSetConfig.pmTime"
                  placeholder="时间"
                >
                </el-time-picker></div
            ></el-col>
          </el-row>
        </div>
      </div>
      <div class="sectionSet" v-if="sectionEditNext == 1">
        <div class="sectionSet_am flex">
          <div class="sectionSet_am_l">上午</div>
          <div class="sectionSet_am_r">
            <el-row :gutter="20">
              <el-col
                :span="12"
                v-for="(am, ix) in amplanList"
                :key="'am' + ix"
                style="margin-bottom: 20px"
              >
                <span style="margin-right: 10px"
                  >第{{ $convertNum(am.sortNo) }}讲</span
                >
                <el-time-picker
                  format="HH:mm"
                  style="width: 103px"
                  v-model="am.startTime"
                  placeholder="时间"
                >
                </el-time-picker
                ><span style="margin: 0px 10px">~</span
                ><el-time-picker
                  format="HH:mm"
                  style="width: 103px"
                  v-model="am.endTime"
                  placeholder="时间"
                >
                </el-time-picker>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="sectionSet_pm flex">
          <div class="sectionSet_am_l">下午</div>
          <div class="sectionSet_am_r">
            <el-row :gutter="20">
              <el-col
                :span="12"
                v-for="(pm, ix) in pmplanList"
                :key="'pm' + ix"
                style="margin-bottom: 20px"
              >
                <span style="margin-right: 10px"
                  >第{{ $convertNum(pm.sortNo) }}讲</span
                >
                <el-time-picker
                  format="HH:mm"
                  style="width: 103px"
                  v-model="pm.startTime"
                  placeholder="时间"
                >
                </el-time-picker
                ><span style="margin: 0px 10px">~</span
                ><el-time-picker
                  format="HH:mm"
                  style="width: 103px"
                  v-model="pm.endTime"
                  placeholder="时间"
                >
                </el-time-picker>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="sectionSet_pm flex"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="sectionEditNext == 1" @click="sectionEditNext = 0"
          >上一步</el-button
        >
        <el-button type="primary" v-if="sectionEditNext == 1" @click="saveuUser"
          >确 定</el-button
        >
        <el-button
          type="primary"
          v-if="sectionEditNext == 0"
          @click="setUserTiem"
          >下一步</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  adminSchoolTimetableList,
  adminSchoolTimetableSave,
  adminSchoolTimetableUpdate,
  adminSchoolTimetableInfo
} from '@/api/lcmapi.js'

export default {
  data () {
    return {
      emu: {
        gradeList: [],
        semesterList: []
      },
      tableArr: [
        {
          prop: 'shortName',
          label: '简称'
        },
        {
          prop: 'name',
          label: '名称'
        },
        {
          prop: 'questionCount',
          label: '说明'
        },
        {
          type: 'btnArr',
          label: '操作',
          prop: 'configBtn',
          fixed: 'right',
          width: 180
        }
      ],
      tableData: [],
      total: 0,
      currPage: 1,
      sectionSetConfig: {
        amNum: 3, //	上午节数
        amTime: new Date('2022-01-01 8:00'), // 首课时间：上午
        duration: 45, // 课时长度
        id: null, // 主键ID
        name: '', //
        planList: [],
        pmNum: 4, // 下午节数
        pmTime: new Date('2022-01-01 13:00'), // 首课时间：下午
        rest: 15, //	休息时长
        schoolId: 0, //	学校ID
        shortName: '' // 简称
      },
      sectionEditShow: false,
      sectionEditNext: 0,
      amplanList: [],
      pmplanList: []
    }
  },
  components: {
    tableBox: resolve => require(['@/components/table.vue'], resolve)
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    // this.getInit();
    this.getadminSchoolTimetableList()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {},
  methods: {
    // 点击添加节次
    async addSection (obj) {
      this.sectionEditNext = 0
      this.sectionSetConfig = {
        amNum: '', //	上午节数
        amTime: new Date('2022-01-01 8:00'), // 首课时间：上午
        duration: '', // 课时长度
        id: null, // 主键ID
        name: '', //
        planList: [],
        pmNum: '', // 下午节数
        pmTime: new Date('2022-01-01 13:30'), // 首课时间：下午
        rest: '', //	休息时长
        schoolId: this.$route.query.id, //	学校ID
        shortName: '' // 简称
      }

      if (obj) {
        let res = await adminSchoolTimetableInfo({ id: obj.row.id })
        this.sectionSetConfig = {
          ...res[1].data,
          ...{
            amTime: new Date('2022-01-01 ' + res[1].data.amTime),
            pmTime: new Date('2022-01-01 ' + res[1].data.pmTime)
          }
        }
      } else {
      }
      this.sectionEditShow = true
    },
    // 点击提交保存
    async saveuUser () {
      let { amplanList, pmplanList, sectionSetConfig } = this
      sectionSetConfig = JSON.parse(JSON.stringify(sectionSetConfig))
      let planList = []
      amplanList.forEach(item => {
        let newItme = JSON.parse(JSON.stringify(item))
        planList.push({
          ...newItme,
          endTime: this.returnHM(newItme.endTime),
          startTime: this.returnHM(newItme.startTime)
        })
      })
      pmplanList.forEach(item => {
        let newItme = JSON.parse(JSON.stringify(item))
        planList.push({
          ...newItme,
          endTime: this.returnHM(newItme.endTime),
          startTime: this.returnHM(newItme.startTime)
        })
      })
      let _obj = {
        ...sectionSetConfig,
        planList: planList,
        pmTime: this.returnHM(sectionSetConfig.pmTime),
        amTime: this.returnHM(sectionSetConfig.amTime)
      }
      let res = await adminSchoolTimetableSave(_obj)
      if (res[1]) {
        this.$message.success('执行成功')
        this.sectionEditShow = false
        this.sectionEditNext = 0
        this.getadminSchoolTimetableList()
      }
    },
    // 点击整理当前时间格式
    setUserTiem () {
      let {
        amNum,
        amTime,
        duration,
        pmNum,
        pmTime,
        rest,
        id
      } = this.sectionSetConfig
      if (!amNum || !pmNum) {
        this.$message.error('节数不能为空')
        return
      }
      if (!duration || !rest) {
        this.$message.error('上课周期不能为空')
        return
      }
      if (!pmTime || !amTime) {
        this.$message.error('上课时间不能为空')
        return
      }
      this.sectionEditNext = 1
      let _this = this
      let amplanList = [] // 早上的课程写入
      let amIndex = 0
      var anListFn = function () {
        if (!amplanList[0]) {
          let endTime = new Date(amTime.getTime() + duration * 60 * 1000)
          amplanList.push({
            configId: id, // 配置ID
            endTime: endTime, //	结束时间
            id: null, // 主键ID
            schoolId: _this.$route.query.id, // 学校ID
            sortNo: +amIndex + 1, // 讲次序号
            startTime: amTime, //	开始时间
            type: 1 //	类型（1：上午，2：下午
          })
        } else {
          let startTime = new Date(
            amplanList[amIndex - 1].endTime.getTime() + rest * 60 * 1000
          )
          let endTime = new Date(startTime.getTime() + duration * 60 * 1000)
          amplanList.push({
            configId: id, // 配置ID
            endTime: endTime, //	结束时间
            id: null, // 主键ID
            schoolId: _this.$route.query.id, // 学校ID
            sortNo: +amIndex + 1, // 讲次序号
            startTime: startTime, //	开始时间
            type: 1 //	类型（1：上午，2：下午
          })
        }
        amIndex = amIndex + 1
        if (amIndex < amNum) {
          anListFn()
        }
      }

      let pmplanList = [] // 下午的课程写入
      let pmIndex = 0
      var pmListFn = function () {
        if (!pmplanList[0]) {
          let endTime = new Date(pmTime.getTime() + duration * 60 * 1000)
          pmplanList.push({
            configId: id, // 配置ID
            endTime: endTime, //	结束时间
            id: null, // 主键ID
            schoolId: _this.$route.query.id, // 学校ID
            sortNo: +amNum + pmIndex + 1, // 讲次序号
            startTime: pmTime, //	开始时间
            type: 2 //	类型（1：上午，2：下午
          })
        } else {
          let startTime = new Date(
            pmplanList[pmIndex - 1].endTime.getTime() + rest * 60 * 1000
          )
          let endTime = new Date(startTime.getTime() + duration * 60 * 1000)
          pmplanList.push({
            configId: id, // 配置ID
            endTime: endTime, //	结束时间
            id: null, // 主键ID
            schoolId: _this.$route.query.id, // 学校ID
            sortNo: +amNum + pmIndex + 1, // 讲次序号
            startTime: startTime, //	开始时间
            type: 2 //	类型（1：上午，2：下午
          })
        }
        pmIndex = pmIndex + 1
        if (pmIndex < pmNum) {
          pmListFn()
        }
      }
      anListFn()
      pmListFn()
      this.amplanList = amplanList // 早上的课程写入
      this.pmplanList = pmplanList // 下午的课程写入
    },
    // 获取时分的记录
    returnHM (time) {
      return `${
        new Date(time).getHours() >= 10
          ? new Date(time).getHours()
          : '0' + new Date(time).getHours()
      }:${
        new Date(time).getMinutes() >= 10
          ? new Date(time).getMinutes()
          : '0' + new Date(time).getMinutes()
      }`
    },
    // 获取节次的列表
    async getadminSchoolTimetableList () {
      let res = await adminSchoolTimetableList({
        schoolId: this.$route.query.id
      })
      if (res[1]) {
        let tableData = []
        res[1].data.forEach((item, ix) => {
          tableData.push({
            ...item,
            ...{
              configBtn: [
                {
                  label: '修改',
                  key: 'edit'
                }
              ]
            }
          })
        })
        this.tableData = tableData
        this.$emit('listChange', tableData)
      }
    }
  }
}
</script>
<style lang="scss">
.flex {
  display: flex;
}
.content_box {
  padding: 20px 25px;
  background: #ffffff;
  border-radius: 6px;
  .h_title {
    padding: 16px 0px;
    padding-left: 20px;
    font-size: 18px;
    border-bottom: 1px #ececec solid;
  }
  .sectionSet {
    width: 100%;
    min-height: 400px;
    line-height: 40px;
    .sectionSet_form_1 {
      margin-bottom: 25px;
    }
    .sectionSet_form_2 {
      margin-bottom: 25px;
    }
    .sectionSet_am {
      padding: 20px 0px;
      border-bottom: 1px #ececec solid;
    }
    .sectionSet_pm {
      padding: 20px 0px;
    }
    .sectionSet_am_l {
      min-width: 50px;
      padding-top: 30px;
    }
  }
}
</style>
